// 之前学习的 哪些生命周期函数都是属于 类组件
// 从v16.8+开始， 
// 1. 函数组件 结合useState也可以写状态变量，可以更改页面了
// 2. 函数助教 结合useEffect 副作用（side effect），可以模拟之前类组件的各种生命周期函数。主打写法更简洁

import { useState, useEffect } from "react"

function Header() {
  const [count, setCount] = useState(0)

  // 相当于 类组件的componentDidMount 挂载的时候执行函数
  // 更新页面的时候，也会触发useEffect，所以也相当于之前类组件的 componentDidUpdate生命周期函数
  useEffect(() => {
    // 这个hook里面写各种副作用，例如 log ajax 修改dom localstorage等等
    console.log('useEffect什么时候执行');
    document.title = `当前页面修改了${count}次`
  })

  return (
    <>
      <h3>状态变量：{count}</h3>
      <button onClick={() => setCount(count + 1) }>修改数据</button>
    </>
  )
}

function App() {
  return (
    <>
      <Header />
    </>
  )
}

export default App